<template>
  <div class="main_friend_left_friend">
    <div class="main_friend_left_friend_for">
      <div v-for="(item,index) in friendList" :key="item.id">
        <div @click="handleFriendChat(item,index)" class="main_friend_left_friend_for_item"
             v-if="item.user!=null"
             :class="{'isActive':isActive===index}">
          <img class="main_friend_left_friend_for_item_img" :src="item.user.avatar" alt="">
          <div>
            <div class="main_friend_left_friend_for_item_nickname">{{ item.user.nickname }}</div>
            <div class="main_friend_left_friend_for_item_introduction">{{ item.user.introduction }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
// @ts-ignore
import cookie from 'js-cookie'
//获取当前用户的好友列表
import {getUserFriendList} from "@/api/personalCenter/myFriends";
// @ts-ignore
import Publish from 'pubsub-js'

//是否激活
const isActive = ref(-1)

//好友聊天
const handleFriendChat = (item: object, index: number) => {
  Publish.publish('handleFriendChat', item)
  isActive.value = index
}

//好友列表
const friendList = ref()

//用户id
const userId = ref<number>(0)

//获取当前用户的好友列表
const handleUserFriendList = () => {
  getUserFriendList(userId.value).then((res) => {
    friendList.value = res.data.data.list
  })
}

//从cookie中获取用户信息
const getUserinfo = async () => {
  userId.value = await JSON.parse(cookie.get('userinfo')).id
  handleUserFriendList()
}

getUserinfo()
</script>

<style lang="less" scoped>
.main_friend_left_friend {
  .main_friend_left_friend_for {
    .main_friend_left_friend_for_item {
      display: flex;
      margin-bottom: 5px;
      border-bottom: 1px solid white;
      cursor: pointer;

      .main_friend_left_friend_for_item_img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        padding: 5px;
      }

      .main_friend_left_friend_for_item_nickname {
        margin-top: 10px;
      }

      .main_friend_left_friend_for_item_introduction {
        width: 190px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 10px;
      }
    }

    .isActive {
      background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
    }

    .main_friend_left_friend_for_item:hover {
      background-color: paleturquoise;
    }
  }
}
</style>